<template>
  <div class="goods">
    <div class="box">
      <div class="add">
        <el-input
          placeholder="请输入查询id"
          show-word-limit
          style="width: 240px"
          size="large"
          v-model="seekValue"
        >
          <template #append>
            <el-button :icon="Search" @click="seek" />
          </template>
        </el-input>
        <el-button type="primary" size="large" @click="add">添加商品</el-button>
      </div>
      <div class="table">
        <el-table
          :data="tableData"
          style="width: 100%"
          height="550"
          stripe
          fit
          highlight-current-row
          scrollbar-always-on
        >
          <el-table-column prop="goods_id" label="id" width="40" fixed />
          <el-table-column prop="goods_name" label="商品名称" width="580" fixed />
          <el-table-column prop="goods_price" label="价格" />
          <el-table-column prop="goods_number" label="数量" />
          <el-table-column prop="goods_weight" label="重量" />
          <el-table-column prop="goods_state" label="商品状态">
            <template #default="scope">
              <div class="li">
                <el-button type="danger" v-if="scope.row.goods_state === 0" plain disabled
                  >未通过</el-button
                >
                <el-button type="warning" v-if="scope.row.goods_state === 1" plain disabled
                  >审核中</el-button
                >
                <el-button type="success" v-if="scope.row.goods_state === 2" plain disabled
                  >已经审核</el-button
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="add_time" label="添加时间" width="180" />
          <el-table-column prop="upd_time" label="更新时间" width="180" />
          <el-table-column prop="hot_mumber" label="热销品数量" />
          <el-table-column prop="is_promote" label="热销品">
            <template #default="scope">
              <div class="li">
                <el-switch
                  v-model="scope.row.is_promote"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  disabled
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="" label="操作" width="180">
            <template #default="scope">
              <div class="li">
                <el-button type="warning" size="small" @click="edit(scope.row)">编辑</el-button>
                <el-popconfirm
                  class="box-item"
                  title="删除此项"
                  placement="top-start"
                  @confirm="confirmDelete(scope.row.goods_id)"
                  @cancel="cancelDelete"
                >
                  <template #reference>
                    <el-button type="danger" size="small">删除</el-button>
                  </template>
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="paging">
        <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[100, 200, 300, 400]"
          size="default"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tot"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { delSp } from '@/api/delSp'
import { useCounterStoreB } from '@/stores/temporary'
import { getCommodityTableB } from '@/api/commodityTableB'
import { Search } from '@element-plus/icons-vue'
const storeB = useCounterStoreB()
const state = ref(storeB.addState)
interface goods {
  data: {
    data: {
      goods: {
        goods_id: number
        goods_name: string
        goods_price: number
        goods_number: number
        goods_weight: number
        goods_state: number
        add_time: string
        upd_time: string
        hot_mumber: number
        is_promote: number
      }
      total: number
    }
  }
}
const currentPage4 = ref(1)
const pageSize4 = ref(100)
const disabled = ref(false)
const background = ref(false)
const tot = ref(0)

const tableData = ref()
const seekValue = ref('')
interface itemInter {
  goods_id: number
}
const seek = () => {
  tableData.value = tableData.value.filter(
    (item: itemInter) => item.goods_id === Number(seekValue.value),
  )
  console.log(seekValue.value)
}
const add = async () => {
  sta('添加商品table')
}
const edit = (row: object) => {
  storeB.jurisdictionObjFun(row)
  sta('编辑商品table')
}

const fn = async (pageSize: number, currentPage: number) => {
  try {
    const res = (await getCommodityTableB({
      pagenum: pageSize,
      pagesize: currentPage,
    })) as goods
    tableData.value = res.data.data.goods
    tot.value = res.data.data.total
  } catch (err) {
    console.log(err)
  }
}
const handleSizeChange = (val: number) => {
  pageSize4.value = val
  fn(currentPage4.value, pageSize4.value)
}
const handleCurrentChange = (val: number) => {
  currentPage4.value = val
  fn(currentPage4.value, pageSize4.value)
}
const confirmDelete = async (id: number) => {
  try {
    await delSp(id)
  } catch (err) {
    console.log(err)
  }
  console.log('确认删除', id)
}
const cancelDelete = () => {
  console.log('取消删除')
}

const sta = (str: string) => {
  state.value = !state.value
  storeB.stateFun(state.value)
  storeB.titleStateFun(str)
}
onMounted(() => {
  fn(currentPage4.value, pageSize4.value)
})
watch(
  () => storeB.addState,
  (i) => {
    state.value = i
  },
)
</script>

<style scoped lang="scss">
.box {
  .add {
    .el-input {
      margin-right: 20px;
    }
  }
  .li {
    display: flex;
  }
}
</style>
